{extend name="common/pop" /}
{block name="content"}
<div class="layui-form" style="margin-top:15px;width:90%;">
    <div class="layui-form-item">
        <label for="" class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name" placeholder="请输入角色名称" value="{$info.name}">
        </div>
    </div>

    <div class="layui-form-item">
        <label for="" class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea name="description" id="" class="layui-textarea">{$info.description}</textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="" class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" {if $info.status == 1 }checked{/if}>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <div id="tree"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter='update'>立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['layer','jquery','form','tree'],function () {
        var form = layui.form,
            layer = layui.layer,
            tree = layui.tree,
            $ = layui.jquery;

        form.render();

        form.on('submit(update)',function(data){
            var loading = layer.load();
            $.post('{:url("create")}',data.field,function(r){
                layer.close(loading);
                if(r.code == 1){
                    layer.msg(r.msg);
                    close(1500,true);
                }else{
                    layer.msg(r.msg);
                }
            },'json')
        });

        $.get('{:url("menu/getTree")}',{},function(res){
            if(res.length > 0){
               tree.render({
                    elem: '#tree'  //绑定元素
                    ,data: res
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'tree1'
                    ,showLine:true
                    ,checkboxName:'permession[]'
                    ,isJump: false //是否允许点击节点时弹出新窗口跳转
                    ,click: function(obj){
                        /* var data = obj.data;  //获取当前点击的节点数据
                         layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));*/
                    }
                });

                tree.setChecked('tree1',JSON.parse("{$info.permessionIds}"));
            }else{
                layer.msg('加载权限数据失败，请刷新页面重试')
            }
        },'json');
    })
</script>
{/block}

